<template>
  <div>
    <c-title :hide="false" :text="diy_name||'资金池'" />
    <header class="header">
      <van-tabs v-model="active" class="pool">
        <van-tab :title="'动静余额'+diy_name||'资金池'" name="capital_pool_records">
          <ul class="balance-wrapper">
            <li>
              <i class="iconfont icon-fontclass-zhangdan"></i>
              <div class="price">
                <span class="price-icon">￥</span>
                <span class="total">{{ performance_total }}</span>
              </div>
              <span class="show_info">总业绩</span>
            </li>
            <li>
              <i class="iconfont icon-fontclass-fanli"></i>
              <div class="price">
                <span class="price-icon">￥</span>
                <span class="total">{{ finished_quota }}</span>
              </div>
              <span class="show_info">已发广告红包</span>
            </li>
            <li>
              <i class="iconfont icon-fontclass-fufeijilu"></i>
              <div class="price">
                <span class="price-icon">￥</span>
                <span class="total">{{ waiting_quota }}</span>
              </div>
              <span class="show_info">待发业绩</span>
            </li>
            <li>
              <i class="iconfont icon-ht_content_tixian"></i>
              <div class="price">
                <span class="price-icon">￥</span>
                <span class="total">{{ capital_pool }}</span>
              </div>
              <span class="show_info">广告红包余额</span>
            </li>
          </ul>
          <van-button color="#ffec46" @click="to">领取红包</van-button>
        </van-tab>
        <van-tab title="直推奖金" name="love_speed_pool">
          <div class="direct-drive">
            <div class="price">
              <span class="price-icon">￥</span>
              <span class="total">{{ amount_total }}</span>
            </div>
            <div class="total-income">累计收入</div>
          </div>
        </van-tab>
      </van-tabs>
    </header>
    <main class="main">
      <van-tabs v-model="main_price">
        <van-tab v-if="active == 'capital_pool_records'" title="广告红包明细">
          <van-cell-group>
            <van-cell v-for="item in capital_pool_records.data" :key="item.id">
              <template #title>
                <div class="main-left">
                  <p>{{ item.type_name }}</p>
                  <p class="c-707070" style="white-space: nowrap;">{{ item.created_at }}</p>
                </div>
              </template>
              <template #default>
                <div>
                  <p class="c-101010">{{ item.op }}{{ item.amount }}</p>
                  <p>剩余:{{ item.capital_pool_surplus }}</p>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-tab>
        <van-tab v-else title="收入明细">
          <van-cell-group>
            <van-cell v-for="item in love_speed_pool.data" :key="item.id">
              <template #title>
                <div class="main-left">
                  <p>{{item.order_sn}}</p>
                  <p class="c-959595">订单金额：￥{{item.order_price}}</p>
                  <p class="c-959595">奖励比例：{{item.ratio}}%</p>
                  <p class="c-6A6A6A">{{item.created_at}}</p>
                </div>
              </template>
              <template #default>
                <p class="c-FB6B68">￥{{item.amount}}</p>
              </template>
            </van-cell>
          </van-cell-group></van-tab
        >
      </van-tabs>
    </main>
    <div class="h-10"></div>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: "capital_pool_records",
      amount_total: "",
      love_speed_pool:{},
      diy_name:'',
      balance_detail: 0,
      ad_link: "", //广告链接
      performance_total: "",
      finished_quota: "",
      waiting_quota: "",
      capital_pool: "",
      capital_pool_records: {},
      isLoadMore:true,//加载更多
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    to(){
      this.$router.push(this.fun.getUrl("redPacket"))
    },
    getData() {
      //获取首页
      $http.get("plugin.love-speed-pool.frontend.newHome.index").then(res => {
        if (res.result == 1) {
          let { performance_total, finished_quota, waiting_quota, capital_pool, capital_pool_records ,diy_name} = res.data;
          this.performance_total = performance_total;
          this.finished_quota = finished_quota;
          this.waiting_quota = waiting_quota;
          this.capital_pool = capital_pool;
          this.capital_pool_records = capital_pool_records;
          this.diy_name=diy_name
          window.document.title=this.diy_name;
        } else {
          this.$toast(res.msg);
        }
      });
      //直推奖
      $http.get("plugin.love-speed-pool.frontend.plus.index").then(res => {
        if (res.result == 1) {
          this.amount_total = res.data.amount_total;
          this.love_speed_pool = res.data.list;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this[this.active].current_page >= this[this.active].last_page) {
        return;
      } else {
        let url = "";
        if (this.active == "capital_pool_records") {
          url = "plugin.love-speed-pool.frontend.newHome.index";
        } else {
          url = "plugin.love-speed-pool.frontend.plus.index";
        }
        $http.get(url, { page: this[this.active].current_page + 1 }, "加载中").then(res => {
          this.isLoadMore = true;
          if (res.result == 1) {
            if (this.active == "capital_pool_records") {
              this.capital_pool_records.data = this.capital_pool_records.data.concat(res.data.capital_pool_records.data);
              this.capital_pool_records.current_page = res.data.capital_pool_records.current_page;
            } else {
              this.love_speed_pool.data = this[this.active].data.concat(res.data.list.data);
              this.love_speed_pool.current_page = res.data.list.current_page;
            }
          } else {
            this.$toast(res.msg);
            this.isLoadMore = false;
          }
        });
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.h-10{
  height: 0.825rem;
}
.pool {
  /deep/.van-tabs__nav {
    background-color: #ff851c !important;
  }
  /deep/.van-tab {
    color: #fff;
  }
  /deep/.van-tabs__line {
    background-color: #fff;
  }
}
.iconfont {
  width: 2.1875rem;
  height: 2.1875rem;
  line-height: 2.1875rem;
  border-radius: 100px;
  color: #fff;
  font-size: 1.25rem;
  margin-top: 0.8125rem;
}
.icon-ht_content_tixian {
  background-image: linear-gradient(0deg, #99f470 0%, #75e07e 50%, #50cb8b 100%), linear-gradient(#f7f7f7, #f7f7f7);
}
.icon-fontclass-fanli {
  background-image: linear-gradient(0deg, #69eacc 0%, #47d9be 50%, #24c7af 100%), linear-gradient(#f7f7f7, #f7f7f7);
}
.icon-fontclass-fufeijilu {
  background-image: linear-gradient(0deg, #fad638 0%, #f6b42c 100%), linear-gradient(#f7f7f7, #f7f7f7);
}
.icon-fontclass-zhangdan {
  background-image: linear-gradient(0deg, #fda884 0%, #fd9e75 50%, #fd9365 100%), linear-gradient(#f7f7f7, #f7f7f7);
}

.total {
  font-size: 2rem;
  color: #f15353;
  font-weight: 600;
}
.price-icon {
  font-size: 1rem;
  color: #f15353;
  font-weight: 600;
}
.total-income {
  color: #2c2c2c;
  font-size: 1rem;
}
.block {
  position: relative;
  width: 20rem;
  margin: 0 2rem;
  .success-img {
    width: 100%;
  }
  .success-btn {
    width: 9rem;
    height: 2rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: 0 auto;
    text-align: center;
    line-height: 2rem;
    background: linear-gradient(#ffe71f, #ffe71f);
    box-shadow: 0rem 0.3rem 0rem 0rem rgba(255, 148, 8, 0.8);
    border-radius: 1rem;
    color: #ff4e00;
  }
  &-confirm {
    position: absolute;
    top: 59%;
    right: 0;
    left: 0;
    text-align: center;
    color: #ffffff;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.direct-drive {
  width: 16rem;
  height: 7rem;
  background-color: #ffffff;
  border-radius: 1rem;
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1.875rem auto 0;
}
.price {
  font-size: 1.75rem;
}
.c {
  &-673000 {
    color: #673000;
  }
  &-FB6B68 {
    color: #fb6b68;
  }
  &-959595 {
    color: #959595;
  }
  &-101010 {
    color: #101010;
  }
  &-6A6A6A {
    color: #6a6a6a;
  }
  &-707070 {
    color: #707070;
  }
  &-9C040A0D {
    color: #9c040a0d;
  }
}
.main {
  margin: 0.625rem;
  background-color: #fff;
  border-radius: 1rem;
  /deep/.van-tab {
    color: #ff851c;
  }

  /deep/ .van-cell {
    border-bottom-right-radius: 2em;
    border-bottom-left-radius: 2em;
  }
  /deep/.van-tabs__line {
    background-color: #ff851c;
  }
  &-left {
    text-align: left;
  }
  /deep/ .van-tabs__wrap,
  .van-cell-group {
    border-radius: 1rem;
  }
  /deep/ .van-cell-group {
    border-top-left-radius: 2em;
    border-top-right-radius: 2em;
  }
}
.header {
  background-color: #ff851c;
  padding-bottom: 1.3125rem;
  /deep/ .van-button {
    width: 13.5rem;
    height: 1.9375rem;
    margin-top: 0.3125rem;
    color: #673000 !important;
    border-radius: 2rem;
  }
}
.balance-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 1.4375rem;
  li {
    width: 10.25rem;
    height: 6.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    .total {
      font-size: 1rem;
    }
    .price-icon {
      font-size: 0.875rem;
    }
  }
  .show_info {
    margin-top: 0.1875rem;
  }
}
.draw {
  color: #f41100;
  position: absolute;
  left: 0;
  right: 0;
  top: 19%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  &-price {
    font-size: 2rem;
  }
  &-icon {
    position: relative;
    bottom: 4px;
  }
}
</style>
